<template>
  <t-card :bordered="false">
    <t-row>
      <t-col :xs="12" :xl="9">
        <t-card
            :bordered="false"
            title="居住统计"
            subtitle="(户)"
            :class="{ 'dashboard-overview-card': true, 'overview-panel': true }"
        >
          <div
              id="stokeContainer"
              style="width: 100%; height: 351px"
              class="dashboard-chart-container"
          ></div>
        </t-card>
      </t-col>
      <t-col :xs="12" :xl="3">
        <t-card :bordered="false" :class="{ 'dashboard-overview-card': true, 'export-panel': true }">
          <template #actions></template>
          <t-row>
            <t-col :xs="6" :xl="12">
              <t-card :bordered="false" subtitle="已入住总计（户）" class="inner-card">
                <div class="inner-card__content">
                  <div class="inner-card__content-title">{{this.inTotal}}</div>
                  <div class="inner-card__content-footer">
                    仅包含自主住户
                  </div>
                </div>
              </t-card>
            </t-col>
            <t-col :xs="6" :xl="12">
              <t-card :bordered="false" subtitle="已入住总计（户）" class="inner-card">
                <div class="inner-card__content">
                  <div class="inner-card__content-title">{{this.inTotalRent}}</div>
                  <div class="inner-card__content-footer">
                    仅包含出租住户
                  </div>
                </div>
              </t-card>
            </t-col>
          </t-row>
        </t-card>
      </t-col>
    </t-row>
  </t-card>
</template>
<script>
import {TooltipComponent, LegendComponent, GridComponent} from 'echarts/components';
import {PieChart, LineChart, BarChart} from 'echarts/charts';
import {CanvasRenderer} from 'echarts/renderers';
import * as echarts from 'echarts/core';


echarts.use([TooltipComponent, LegendComponent, PieChart, GridComponent, LineChart, CanvasRenderer, BarChart]);

export default {
  name: 'MiddleChart',
  data(){
    return{
      buildingArray:['一栋','二栋','三栋','四栋','五栋','六栋','七栋','八栋','九栋','十栋'],
      inTotal:190,
      inTotalRent:110,
      outArray:[10,15,10,5,5,5,25,5,5,20],
      inArray:[30,25,30,35,35,35,15,35,35,20]
    }
  },
  mounted() {
    let echart = echarts.init(document.getElementById('stokeContainer'));
    let option={
      color: ['#0052d9', '#d9e1ff'],
      tooltip: {
        trigger: 'item',
      },
      xAxis: {
        type: 'category',
        data: this.buildingArray,
        axisLine: {
          lineStyle: {
            width: 1,
          },
        },
      },
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: {
          },
        },
      },
      grid: {
        top: '5%',
        left: '25px',
        right: 0,
        bottom: '60px',
      },
      legend: {
        icon: 'rect',
        itemWidth: 12,
        itemHeight: 4,
        itemGap: 48,
        textStyle: {
          fontSize: 12,
        },
        left: 'center',
        bottom: '0',
        orient: 'horizontal',
        data: ['已入住', '未入住'],
      },
      series: [
        {
          name: '已入住',
          data: this.inArray,
          type: 'bar',
        },
        {
          name: '未入住',
          data: this.outArray,
          type: 'bar',
        },
      ],
    };
    echart.setOption(option);
  }
}
</script>
<style lang="less" scoped>
@import '@/style/variables.less';

.dashboard-overview-card {
  /deep/ .t-card__header {
    padding-bottom: 24px;
  }

  /deep/ .t-card__title {
    font-size: 20px;
    font-weight: 500;
  }

  &.overview-panel {
    border-right: none;
  }

  &.export-panel {
    border-left: none;
  }
}

.inner-card {
  padding: 24px 0;

  /deep/ .t-card__header {
    padding-bottom: 0;
  }

  &__content {
    &-title {
      font-size: 36px;
      line-height: 44px;
    }

    &-footer {
      display: flex;
      align-items: center;
      line-height: 22px;
      color: var(--td-text-color-placeholder);

      .trend-tag {
        margin-left: 4px;
      }
    }
  }
}
</style>